.el-container {
	width: 100%;
	height: 100%;
	background: linear-gradient(165deg, #2b3a92, #0487d0, #1761b2, #6a5acd);

	.el-dropdown {
		position: fixed;
		top: 5%;
		right: 5%;
		cursor: pointer;
		color: var(--el-color-info-light-9);
	}

	.el-main {
		color: var(--el-text-color-primary);
		font-size: var(--el-font-size-base);
		display: flex;
		justify-content: center;
		align-items: center;
		.login-card {
			width: 800px;
			height: 430px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			background-color: var(--el-bg-color-overlay);
			border-radius: 50px 10px 50px 10px;
			box-shadow: var(--el-box-shadow);
			.login-card__left {
				padding: 30px;
				background-size: 80% 50%;
				background-position: center;
				background-image: url("@/assets/images/login_ikon.png");
				background-repeat: no-repeat;
				.left__title {
					display: flex;
					align-items: center;
					img {
						width: 25px;
						height: 25px;
						margin-right: 7px;
					}
				}
			}
			.login-card__right {
				padding: 30px;
				background-color: #ebf2fc;
				border-radius: 50px 10px 50px 50px;
			}
		}
	}

	.el-footer {
		font-size: var(--el-font-size-base);
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: height var(--el-transition-duration);
		overflow: hidden;
	}
}

html.small {
	.el-container {
		.el-footer {
			font-size: var(--el-font-size-extra-small);
			flex-direction: column;
			justify-content: space-evenly;
			height: calc(var(--el-footer-height) * 1.7);
		}
	}
}

html.dark {
	.el-container {
		background: linear-gradient(165deg, #1d2764, #004972, #0e4076, #4b0082);
		.el-dropdown {
			color: var(--el-color-primary-light);
		}
		.el-main {
			.login-card {
				.login-card__right {
					background-color: #343434;
				}
			}
		}
	}
}

@media (max-width: 800px) {
	.el-container {
		min-width: 500px;
		.el-main {
			.login-card {
				max-width: 450px;
				height: 470px;
				grid-template-columns: 1fr;
				border-radius: 50px;
				padding: 30px;
				background-color: #ebf2fc;
				.login-card__left {
					padding: 0;
					background: none;
				}
				.login-card__right {
					padding: 0;
					border-radius: 0;
				}
			}
		}
	}
}
